<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的主页</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="changePassword.css">
    <script type="text/javascript" src="./layui/layui.js"></script>
    <script type="text/javascript" src="jquery-3.5.1.js"></script>
    <script type="text/javascript" src="changePassword.js"></script>
    <script>
        function myReset()
        {
            document.getElementsByName("password")[0].value="";
            document.getElementsByName("password")[1].value="";
            document.getElementsByName("again_password")[0].value="";
            for(var i=0;i<2;i++)
            {
                document.getElementsByClassName("tip")[i].style.visibility="hidden";
                document.getElementsByClassName("OK")[i].style.visibility="hidden";
            }
            for(var j=1;j<3;j++)
            {
                console.log(j)
                document.getElementsByTagName("input")[j].style.border="";
                document.getElementsByTagName("input")[j].style.borderColor="";
            }
        }
        function changePassword()
        {
            var $ = layui.jquery, layer = layui.layer;
            layer.open
            ({
                type: 1,
                area: ['800px', '400px'],
                title: ['修改密码', 'font-size:18px'],
                content: $('#changePassword')
            })
        }
        function updatePassword()
        {
            var oldPassword = document.getElementById("oldPassword").value;
            var newPassword = document.getElementById("newPassword").value;
            var checkPassword = document.getElementById("checkPassword").value;
            console.log(oldPassword)
            console.log(newPassword)
            console.log(checkPassword)
            var password={
                oldPassword:oldPassword,
                newPassword:newPassword,
                checkPassword:checkPassword
            }
            $.ajax({
                url:'htto://106.14.215.182:9090/',//url补充完整
                anysc:false,
                data:JSON.stringify(password),
                type: 'post',
                contentType:"application/json;charset:UTF-8",
                dataType:'json',
                success:function (data){
                    console.log(data);
                    if(data === "success")
                    {
                        layui.use('layer',function(){
                            var layer=layui.layer;
                            layer.msg('更新成功！',{
                                icon:1,
                                time:3000
                            });
                        });
                    }
                }
            })
        }
    </script>



</head>
<body>
<div id="main">
    <div class="title">
        <h2 style="font-weight: bold;color: #0B469F;">我的主页</h2>
    </div>
    <div>
        <button type="button" data-method="offset" data-type="auto" class="layui-btn layui-btn-normal" onclick="changePassword()">修改密码</button>
    </div>
    <!--弹出层-->
    <form class="layui-form" style="margin-top: 50px; display: none;" id="changePassword">
        <div class="layui-form-item">
            <label class="layui-form-label"><label class="star">*</label>原密码</label>
            <div class="layui-input-inline">
                <input id="oldPassword" type="password" name="password" required  lay-verify="required" placeholder="请输入您的旧密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><label class="star">*</label>密码</label>
            <div class="layui-input-inline">
                <input onblur="myCheckPassword()" id="newPassword" type="password" name="password" required  lay-verify="required" placeholder="密码的长度应为6——16位，且同时包含字母、数字或符号" autocomplete="off" class="layui-input">
            </div>
            <i class="layui-icon layui-icon-ok OK"></i>
            <div class="tip">
                <label>×对不起，密码设置不符合规范</label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><label class="star">*</label>确认密码</label>
            <div class="layui-input-inline">
                <input onblur="myCheckPasswordAgain()" id="checkPassword" type="password" name="again_password" required  lay-verify="required" placeholder="请再次输入密码" autocomplete="off" class="layui-input">
            </div>
            <i class="layui-icon layui-icon-ok OK"></i>
            <div class="tip">
                <label>×对不起，两次密码设置不一致</label>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" style="background-color: #0B469F;" lay-submit lay-filter="formDemo" onclick="updatePassword()">确认修改</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="myReset()">重置</button>
            </div>
        </div>
    </form>
</div>
<script src="./layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('form',function (){
        var form=layui.form;
        form.render();
    });
</script>
</body>
</html>